<template>
	<div class="short-video" v-if="isShortVideo">
		<div class="top-box">
			<p class="left-p">短视频·精彩看</p>
			<div class="more-box" @click='goMore()'>
				<p>更多</p>
				<Iconfont iconClass="iconfont iconyoujiantou" />
			</div>
		</div>
		<ul class="short-video-ul">
			<li v-for="v of listArray" :key="v.id" @click="linkBackPage(v.vid)">
				<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_190,w_335'" />
			    <p>{{v.title}}</p>
				<i class="play-btn" ></i>
				<i class="right-corner"></i>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props: {
			shortVideoArrayInfo: Object,
		},
		data() {
			return {
				isShortVideo:false,
				objInfo: null,
				listArray: [], //热门主播列表
			}
		},
		computed: {},
		created() {},
		watch: {
			shortVideoArrayInfo(old) {
				this.objInfo = this.shortVideoArrayInfo
				this.listArray = this.shortVideoArrayInfo && this.shortVideoArrayInfo.videoList.splice(0, 2);
				if(this.listArray && this.listArray.length){
					this.isShortVideo = true;
				}else{
					this.isShortVideo = false;
				}
			}
		},
		mounted() {},
		methods: {
			goMore(id, title) {
				this.$router.push({
					path: `/${this.$channel}/telMore`,
					query: {
						id: this.objInfo.id,
						title: this.objInfo.name
					}
				})
			},
			linkBackPage(vid) {
				this.$router.push(`/${this.$channel}/liveBack/${vid}?dzhPage=true`);
			}
		}
	};
</script>

<style scoped="scoped">
	.iconyoujiantou{
		font-size: 24px;
	}
	.short-video-ul {
		padding: 0 32px;
		display: flex;
	}
	.short-video-ul li{
		height: 250px;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 24px;
		position: relative;
	}
	.play-btn{
		position: absolute;
		left: 0;
		right: 0;
		top: 60px;
		width: 73px;
		height: 73px;
		margin:0 auto;
		background: url('../../assets/images/zxyh/play.png') no-repeat;
		background-size: 100% 100%;
	}
	.right-corner{
		position: absolute;
		left: 0;
		top: 0;
		width: 74px;
		height: 74px;
		background: url('../../assets/images/zxyh/right-corner.png') no-repeat;
		background-size: 100% 100%;
	}
	
	.short-video-ul li:last-child {
		flex: 1;
		margin-left: 20px;
	}
	
	.short-video-ul li img {
		width: 335px;
		height: 190px;
		border-radius:24px;
	}
	
	.short-video-ul li p {
		width: 335px;
		padding: 0 16px;
		font-size: 28px;
		font-weight: 400;
		color: #3B3B3B;
		line-height: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
	}
	
	.more-box {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 30px;
		font-size: 27px;
		font-weight: 500;
		color: #777777;
	}
	
	.more-box p {
		font-size: 27px;
		font-weight: 400;
		color: #777777;
		margin-right: 3px;
	}
	
	.left-p {
		display: flex;
		align-items: center;
		margin-left: 32px;
		font-size: 35px;
		font-weight: 800;
		color: #34323F;
	}
	 .left-p::before{
		content: " ";
		height: 44px;
		width: 44px;
		margin-right: 16px;
		background: url('../../assets/images/zxyh/short_video.png') no-repeat;
		background-size: 100% 100% ;
    }
	
	.top-box {
		width: 100vw;
		display: flex;
		align-items: center;
		margin-top: 48px;
		margin-bottom: 24px;
	}
	
	.short-video {
		width: 750px;
		/* height: 356px; */
	}
	
	.more-box {
		display: flex;
	}
</style>